<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <link href="../css/base.css" rel="stylesheet" type="text/css"/>
    <link href="http://jquery-ui.googlecode.com/svn/tags/1.8.20/themes/ui-darkness/jquery-ui.css" rel="stylesheet"
          type="text/css"/>
    <style type="text/css">
        .ui-state-default a:visited {
            color: #FFFFFF;
        }

        .ui-state-active a:visited {
            color: #FFFFFF;
        }

        .ui-accordion .ui-accordion-content {
            padding: 0;
        }

        .subItem a {
            width: 168px;
            height: 24px;
            display: block;
            padding-left: 30px;
            color: #FFF;
            text-decoration: none;
        }

        .subItem a:hover {
            font-weight: bold;
            color: #FFFFFF;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.20/ui/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(window).resize(function () {
                layoutInit();
            });

            var icons = {
                header:"ui-icon-circle-arrow-e",
                headerSelected:"ui-icon-circle-arrow-s"
            };
            $("#accordion").accordion({
                icons:icons
            });

            layoutInit();
        });
        function layoutInit() {
            var ww = $("#main").width();
            var lw = $("#left").width();
            $("#right").css("width", ww - lw);
            var winWidth = $(window).height();
            var headerHeight = $("#header").height();
            var footerHeight = $("#footer").height();
            var mainHeight = winWidth - headerHeight - footerHeight;
            $("#main").css("height", mainHeight);
        }
    </script>
</head>

<body>
<div id="header">
    header
</div>
<div id="main">
    <div id="left">
        <h1>&nbsp;&nbsp;导航</h1>
        <div id="accordion">
            <h3><a href="#">用户管理</a></h3>
            <div class="subItem">
                <a href="">查看用户</a>
                <a href="">更改用户状态</a>
            </div>

            <h3><a href="#">客户管理</a></h3>

            <div class="subItem">
                <a href="addSpace.html">批准客户</a>
                <a href="">更改客户状态</a>
                <a href="">更改客户广告</a>
            </div>

            <h3><a href="#">系统管理</a></h3>

            <div class="subItem">
                <a href="">系统日志</a>
            </div>
        </div>

    </div>
    <div id="right">
        right
    </div>
</div>
<div id="footer">
    footer
</div>
</body>
</html>
